<script setup>
import { reactive, ref } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { UniStore } from '@/utils/UniStorege'
import UniMessageEx from '@/components/UniMessageEx.vue'
import { SystemConfig } from '../../utils/SystemConfig'
import { StringUtils } from '../../utils/StringUtils'
import { PAGE_ENTRY_ARG } from '../stocks/material/common/PageParam'
import { PageUtil } from '../../utils/PageUtil'

const logout = ref()

const userInfoStore = UniStore.getObject('u_201')
let { account, name, iconSrc, mobile } = userInfoStore || {}

const userInfo = reactive({
  account,
  name,
  iconSrc,
  mobile
})

const dlgLogout = reactive({
  type: 'warn',
  title: '提示',
  msg: '确定要退出当前用户吗?'
})

const material = ref([
  {
    icon: '1',
    value: 'stocks/material/warehouse/in/list',
    label: '原材料入库',
    id: PAGE_ENTRY_ARG.M_IN
  },
  {
    icon: '7',
    value: 'stocks/material/warehouse/out/list',
    label: '原材料出库',
    id: PAGE_ENTRY_ARG.M_OUT
  },
  {
    icon: '11',
    value: 'stocks/material/warehouse/out/list',
    label: '原材料退货',
    id: PAGE_ENTRY_ARG.M_REFUND
  },
  {
    icon: '4',
    value: 'stocks/material/warehouse/in/list',
    label: '其他入库',
    id: PAGE_ENTRY_ARG.O_IN
  },
  {
    icon: '9',
    value: 'stocks/material/warehouse/out/list',
    label: '其他出库',
    id: PAGE_ENTRY_ARG.O_OUT
  }
])
const product = ref([
  {
    icon: '3',
    value: 'stocks/material/warehouse/in/list',
    label: '成品入库',
    id: PAGE_ENTRY_ARG.P_IN
  },
  {
    icon: '7',
    value: 'stocks/material/warehouse/out/list',
    label: '成品出库',
    id: PAGE_ENTRY_ARG.P_OUT
  },
  {
    icon: '11',
    value: 'stocks/material/warehouse/in/list',
    label: '成品退货',
    id: PAGE_ENTRY_ARG.P_REFUND
  },
  {
    icon: '4',
    value: 'stocks/material/warehouse/in/list',
    label: '其他入库',
    id: PAGE_ENTRY_ARG.O_IN
  },
  {
    icon: '9',
    value: 'stocks/material/warehouse/out/list',
    label: '其他出库',
    id: PAGE_ENTRY_ARG.O_OUT
  }
])
const modules = ref({
  material: [
    // { icon: '1', value: 'dialogs/BiiDialog', label: '原材料入库', id: PAGE_ENTRY_ARG.M_IN },
    // { icon: '1', value: 'stocks/material/warehouse/in/list', label: '原材料入库', id: PAGE_ENTRY_ARG.M_IN },
    // { icon: '7', value: 'stocks/material/warehouse/out/list', label: '原材料出库', id: PAGE_ENTRY_ARG.M_OUT },
    // { icon: '4', value: 'stocks/material/warehouse/in/list', label: '其他入库', id: PAGE_ENTRY_ARG.O_IN },
    // { icon: '11', value: 'stocks/material/warehouse/out/list', label: '原材料退货', id: PAGE_ENTRY_ARG.M_REFUND },
  ],
  product: [
    // { icon: '3', value: 'stocks/material/warehouse/in/list', label: '成品入库',id: PAGE_ENTRY_ARG.P_IN },
    // { icon: '7', value: 'stocks/material/warehouse/out/list', label: '成品出库',id: PAGE_ENTRY_ARG.P_OUT },
    // { icon: '11', value: 'stocks/material/warehouse/in/list', label: '成品退货',id: PAGE_ENTRY_ARG.P_REFUND },
    // { icon: '9', value: 'stocks/material/warehouse/out/list', label: '其他出库',id: PAGE_ENTRY_ARG.O_OUT }
  ],
  common: [
    { icon: '12', value: 'stocks/query/lookup/list', label: '库存查询' },
    { icon: '10', value: 'stocks/query/result/list', label: '库存盘点' },
    { icon: '10', value: 'stocks/query/forecast/list', label: '库存预警' },
    { icon: '12', value: 'terminal/index', label: '终端配置' },
    { icon: '10', value: 'material/ingredient/index', label: '配料任务' },
    { icon: '10', value: 'material/feeding/index', label: '投料' },
    { icon: '10', value: 'productionReport/index', label: '生产报工' },
    { icon: '10', value: 'stocks/query/forecast/list', label: '设备异常' },
    { icon: '10', value: 'stocks/query/forecast/list', label: '扫码' },
    { icon: '10', value: 'stocks/query/forecast/list', label: '生产检验' }
  ],
  total: 0
})

const queryMenus = function () {
  let user_info = UniStore.getObject('u_201')
  console.log('current user info=>', user_info)
  user_info.roleCode.map((x) => {
    if (x == 'yuan_wh') {
      modules.value.material = material.value
    } else if (x == 'cheng_wh') {
      modules.value.product = product.value
    }
  })
}

const moduleClick = function (item) {
  // uni.navigateTo({
  //   url: '../' + item.value
  // })
  const { id } = item
  PageUtil.addEvent(
    `l-${id}-listview`,
    () => {
      // queryList()
    },
    {
      route: '../' + item.value,
      params: {
        row: {
          __PAGE_ID: id
        }
      }
    }
  )
}

const logoutConfirm = function (confirm) {
  if (!confirm) return
  UniStore.setT(null)
  UniStore.removeObject('__u203')
  uni.reLaunch({
    url: '../login/index'
  })
}

const doLogout = function () {
  logout.value.open()
}

const goSetting = function () {
  uni.navigateTo({
    url: '../SystemSetting/index'
  })
}

onShow(() => {
  // queryMessages()
  const wss = SystemConfig.getWorkStation()
  const settings = SystemConfig.getSetting()
  const { bc_code } = settings || {}
  console.log('current settings', wss, settings)
  if (!StringUtils.isEmptyOrNull(bc_code) && wss.length) {
    return
  }
  // uni.navigateTo({ url: '../SystemSetting/index' })
})
onLoad(() => {
  queryMenus()
})
//#endregion Page Events
</script>

<template>
  <div class="page-warp bg-grey-200">
    <div class="header">
      <div class="user-warp">
        <div class="info-warp">
          <div class="user-info-warp">
            <div class="user-icon">
              <div class="icon-warp">
                <!-- <image :src="userInfo.iconSrc"
                       class="image-icon"></image> -->
                <image src="@/static/images/icon/head.png" class="image-icon"></image>
              </div>
            </div>
            <div class="user-info">
              <div class="name">{{ userInfo.name }}</div>
              <div class="dept">{{ userInfo.mobile }}</div>
            </div>
          </div>

          <div class="logout">
            <a class="top-btn logout-btn" @click="doLogout"></a>
            <!--            <a class="top-btn setting"-->
            <!--               @click="goSetting"></a>-->
          </div>
        </div>
      </div>
    </div>

    <div class="warp-content">
      <div class="content-warp">
        <div class="context func" v-if="modules.material.length > 0">
          <div class="title">
            <span> 原材料管理 </span>
          </div>

          <div class="modules-warp">
            <div class="list-warp">
              <div class="list-menu">
                <ul class="modules-list">
                  <li
                    :class="['list-item item-sm']"
                    v-for="item in modules.material"
                    :key="item.value"
                    @click="moduleClick(item)"
                  >
                    <a class="rounded-icon">
                      <div
                        class="icon-warp border-0 br-0"
                        :style="{ backgroundColor: item.bgColor }"
                      >
                        <image
                          :src="'../../static/icons/menus/' + item.icon + '.png'"
                          class="image-icon"
                          mode="aspectFit"
                        ></image>
                      </div>
                    </a>
                    <div class="module-title">
                      {{ item.label }}
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <div class="context func" v-if="modules.product.length > 0">
          <div class="title">
            <span> 成品管理 </span>
          </div>

          <div class="modules-warp">
            <div class="list-warp">
              <div class="list-menu">
                <ul class="modules-list">
                  <li
                    :class="['list-item item-sm']"
                    v-for="item in modules.product"
                    :key="item.value"
                    @click="moduleClick(item)"
                  >
                    <a class="rounded-icon">
                      <div
                        class="icon-warp border-0 br-0"
                        :style="{ backgroundColor: item.bgColor }"
                      >
                        <image
                          :src="'../../static/icons/menus/' + item.icon + '.png'"
                          class="image-icon"
                          mode="aspectFit"
                        ></image>
                      </div>
                    </a>
                    <div class="module-title">
                      {{ item.label }}
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <div class="context common-func">
          <!-- <div class="title">
                       <i class="left-icon func" />
            <span> 常用功能 </span>
          </div> -->

          <div class="modules-warp">
            <div class="list-warp">
              <div class="list-menu">
                <ul class="modules-list">
                  <li
                    :class="['list-item item-sm']"
                    v-for="item in modules.common"
                    :key="item.value"
                    @click="moduleClick(item)"
                  >
                    <a class="rounded-icon">
                      <div
                        class="icon-warp border-0 br-0"
                        :style="{ backgroundColor: item.bgColor }"
                      >
                        <image
                          :src="'../../static/icons/menus/' + item.icon + '.png'"
                          class="image-icon"
                          mode="aspectFit"
                        ></image>
                      </div>
                    </a>
                    <div class="module-title">
                      {{ item.label }}
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <uni-popup ref="logout" type="dialog">
      <uni-popup-dialog
        :type="dlgLogout.type"
        :title="dlgLogout.title"
        :content="dlgLogout.msg"
        confirm-text="确定"
        cancel-text="取消"
        @close="logoutConfirm(0)"
        @confirm="logoutConfirm(1)"
      >
      </uni-popup-dialog>
    </uni-popup>

    <uni-message-ex />
  </div>
</template>


<style scoped
       lang="scss">
.page-warp {
  height: calc(100vh - 44px);
  position: relative;
  background-color: #eee;

  .top-btn {
    display: inline-block;
    font-size: 12px;
    width: 26px;
    height: 26px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    cursor: pointer;
    margin-left: 12px;

    &.logout-btn {
      background-image: url('~@/static/images/icon/close.png');
    }

    &.setting {
      background-image: url('~@/static/images/icon/top3.png');
    }
  }

  .header {
    .logout {
    }

    .user-warp {
      background-color: #0088e2;
      border-bottom-left-radius: 45px;
      border-bottom-right-radius: 45px;
      height: 200rpx;
      display: flex;
      /* flex-direction: row; */
      align-items: center;
      /* justify-content: space-between; */
      min-height: 190rpx;
      color: #eee;
      padding-left: 22rpx;
      padding-right: 22rpx;
      margin-bottom: -35px;

      .info-warp {
        flex-grow: 1;
        position: relative;
        top: -10px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }

      .user-info-warp {
        display: flex;
        flex-direction: row;
        align-items: center;
      }

      .user-icon {
        $icon-size: 85rpx;

        .icon-warp {
          overflow: hidden;
          border-radius: 100%;
          height: $icon-size;
          width: $icon-size;
          border: 2px #2898e3 solid;

          > image {
            height: inherit;
            width: inherit;
          }
        }
      }

      .user-info {
        margin-left: 25rpx;
      }
    }
  }

  .warp-content {
    position: relative;
    z-index: 2;
    height: calc(100% - 160rpx);
    display: flex;
    flex-direction: column;

    .content-warp {
      flex-grow: 1;
      display: flex;
      flex-direction: column;

      .context {
        margin: 12rpx 22rpx;

        background-color: #ffff;
        border-radius: 3px;
        display: flex;
        flex-direction: column;

        &.msg {
        }

        &.func {
        }

        &.common-func {
          .list-warp {
            overflow: hidden !important;
          }
        }

        .title {
          font-size: 16px;
          font-weight: 700;
          color: #666666;
          padding-left: 5rpx;
          padding: 8px 12px;
          border-bottom: 1px solid #ebebeb;
          display: flex;
          align-items: center;

          .left-icon {
            display: inline-block;
            width: 18px;
            height: 18px;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            margin-right: 8px;
            position: relative;
            top: 1px;

            &.msg {
              background-image: url('~@/static/images/icon/msg.png');
            }

            &.func {
              background-image: url('~@/static/images/icon/menu.png');
            }
          }
        }

        .modules-warp {
          flex-grow: 1;
          display: flex;
          flex-direction: column;
          position: relative;

          .list-warp {
            .list-menu {
              .modules-list {
                display: flex;
                flex-wrap: wrap;

                align-items: center;
                padding: 0;

                .list-item {
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  border-radius: 15rpx;
                  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 8px;
                  position: relative;
                  cursor: pointer;
                  width: 240rpx;
                  height: 220rpx;
                  margin: 24rpx;

                  &.item-sm {
                    width: auto !important;
                    height: auto !important;
                    margin: 8rpx 18rpx !important;
                    border-radius: 0;
                    box-shadow: none;

                    .image-icon {
                      height: 42px;
                      width: 42px;
                    }

                    .module-title {
                      color: #1f1f1f;
                      margin-top: 3rpx;
                    }
                  }

                  .module-title {
                    margin-top: 15rpx;
                    font-size: 14px;
                    color: #1296db;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .rounded-icon {
    $icon-size: 105rpx;

    .icon-warp {
      overflow: hidden;
      border-radius: 100%;
      height: $icon-size;
      width: $icon-size;
      border: 2px #2898e3 solid;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      &.br-0 {
        border-radius: 0;
      }

      &.border-0 {
        border: none;
      }

      .image-icon {
        height: 72px;
        width: 72px;
      }
    }
  }
}
</style>
